<template>


    <el-card class="box-card" style="width: 98%;margin-left: 1%">
        <span>
              <span style="font-size: 26px;font-weight: bold">   {{ title }}  </span>
              <el-button style="float: right;margin-right: 5.5%;background-color: #FF5E2C;color: white" @click="$refs.form.submit()">保存数据</el-button>
              <el-button style="float: right;margin-right: 12px" @click="emptytChange">关闭</el-button>
         </span>

        <el-card class="box-card" style="margin-top: 20px">
            <div>
                <avue-form ref="form" v-model="obj" :option="option"
                           @reset-change="emptytChange"
                           @submit="submit">
                    <template slot-scope="{row}" slot="content">
                        <MdEditor v-if="initSuccess" :content.sync="obj.content"/>
                    </template>
                </avue-form>
            </div>
        </el-card>
    </el-card>
</template>

<script>
// import VueMarkdownEditor, {xss} from '@kangc/v-md-editor';
import VueMarkdownEditor, {xss} from '@kangc/v-md-editor/lib/codemirror-editor';
// 1、引入store模块
import {getStore} from '@/util/store'

export default {
    data() {
        return {
            obj: {},
            initSuccess: false,
            title: "添加顶级目录/文档",
            uri: {
                info: "/api/admin/all/docInfo",
                listCategory: "/api/admin/all/docCategory/list",
            },
            categoryTypes: [],
            defaultData: {
                type: null,
                pid: null,
                pname: null,
                name: null,
                author: getStore({name: "userInfo"}).fullName,
                describe: "-",
                sort: 0,
                showType: 2,
                disable: 0,
                seoTitle: null,
                seoKeyword: null,
                seoDescription: null,

            },
        }
    },
    props: {
        closeDialog: [],
        type: null, // 当前选中tab分类类型
    },
    computed: {
        option() {
            return {
                submitBtn: true,
                emptyBtn: true,
                submitText: '提交',
                emptyText: "关闭",
                column: [
                    {
                        label: '类型',
                        prop: 'type',
                        span: 23,
                        disabled: true,
                        type: "radio",
                        dicData: this.categoryTypes,
                        props: {
                            label: 'name',
                            value: 'code'
                        },
                        rules: [{
                            required: true,
                            message: "请选择 分类类型",
                            trigger: "blur"
                        }]
                    },

                    {
                        label: '名称',
                        prop: 'name',
                        maxlength: 64,
                        showWordLimit: true,
                        span: 23,
                        rules: [{
                            required: true,
                            message: "请输入 分类名",
                            trigger: "blur"
                        }]
                    },

                    // {
                    //     label: '描述',
                    //     prop: 'describe',
                    //     type: 'textarea',
                    //     maxlength: 256,
                    //     showWordLimit: true,
                    //     span: 23,
                    //     rules: [{
                    //         required: true,
                    //         message: "请输入 分类描述",
                    //         trigger: "blur"
                    //     }]
                    // },
                    {
                        label: '文章内容 ',
                        prop: 'content',
                        maxlength: 0,
                        showWordLimit: true,
                        span: 23,
                        rules: [{
                            required: false,
                            message: "请输入 文章内容 ",
                            trigger: "blur"
                        }]
                    },
                    {
                        label: '展示类型',
                        prop: 'showType',
                        type: 'radio',
                        dicData: this.dict.get('DOC_SHOW_TYPE', true),
                        span: 23,
                        rules: [{
                            required: true,
                            message: "请选择 是否禁用",
                            trigger: "blur"
                        }]
                    },
                    {
                        label: '作者',
                        prop: 'author',
                        span: 23,
                        maxlength: 32,
                        showWordLimit: true,
                        // width: 200,
                        search: false,
                        searchSpan: 5,
                        overHidden: true,
                        rules: [{
                            required: true,
                            message: "请输入 作者",
                            trigger: "blur"
                        }]
                    },
                    {
                        label: '排序',
                        prop: 'sort',
                        maxlength: 9,
                        showWordLimit: true,
                        span: 23,
                        rules: [{
                            required: true,
                            message: "请输入 排序",
                            trigger: "blur"
                        }]
                    },

                    {
                        label: '是否禁用',
                        prop: 'disable',
                        type: 'switch',
                        dicData: this.dict.get('DISABLE', false),
                        span: 23,
                        rules: [{
                            required: true,
                            message: "请选择 是否禁用",
                            trigger: "blur"
                        }]
                    },
                    {
                        label: 'seo: Title',
                        prop: 'seoTitle',
                        maxlength: 128,
                        showWordLimit: true,
                        span: 23,
                        labelWidth: 130,
                        rules: [{
                            required: false,
                            message: "请输入 seo优化字段 Title",
                            trigger: "blur"
                        }]
                    },
                    {
                        label: 'seo: Description',
                        prop: 'seoDescription',
                        type: 'textarea',
                        maxlength: 256,
                        showWordLimit: true,
                        span: 23,
                        labelWidth: 130,
                        rules: [{
                            required: false,
                            message: "请输入 seo优化字段 Description",
                            trigger: "blur"
                        }]
                    },
                    {
                        label: 'seo: Keyword',
                        prop: 'seoKeyword',
                        type: 'textarea',
                        maxlength: 256,
                        showWordLimit: true,
                        span: 23,
                        labelWidth: 130,
                        rules: [{
                            required: false,
                            message: "请输入 seo优化字段 Keyword",
                            trigger: "blur"
                        }]
                    },

                ]
            }
        }
    },
    created() {
        // 查询分类
        this.crud.get(this.uri.listCategory).then(res => {
            this.categoryTypes = res.data.data;
        })

        console.log("添加文档");
        let copyId = this.$route.query.copyId;
        if (copyId != null && copyId != '') {
            this.crud.get(this.uri.info + "/" + copyId).then((res) => {
                this.obj = res.data.data;
                this.initSuccess = true;
                this.title = "在[" + this.obj.parentNode.name + "]分类下, 根据[" + this.obj.name + "] 复制添加"
            });

        } else {
            this.obj = this.defaultData;
            this.obj.pid = this.$route.query.pid;
            this.obj.pname = this.$route.query.pname;
            this.obj.type = parseInt(this.$route.query.type);
            this.initSuccess = true;

            let pname = this.$route.query.pname;
            if (pname != null) {
                this.title = "在[" + this.$route.query.pname + "]分类下, 添加目录/文档"
            }
        }
    },
    methods: {
        emptytChange() {
            // this.closeDialog(false);
            this.$router.push({
                    path: "/viewsdoc/docInfo/docInfo",
                    query: {
                        tenantName: getStore({name: "tenantName"}),
                        activeName: this.obj.type,
                    }
                }
            );
            // this.$router.push({path: "/viewsdoc/docInfo/docInfo?time=" + new Date().getTime()});
        },

        submit(form, done) {
            if (this.obj.content != null && this.obj.content != "") {
                this.obj.contentHtml = xss.process(VueMarkdownEditor.themeConfig.markdownParser.render(this.obj.content));
            }
            this.crud.post(this.uri.info, this.obj).then((res) => {
                console.debug(res);
                if (res.data.code == 200) {
                    //this.closeDialog(true);
                    this.$router.push({
                        // path: "/viewsdoc/docInfo/docInfo?time=" + new Date().getTime(),
                        path: "/viewsdoc/docInfo/docInfo",
                        query: {
                            tenantName: getStore({name: "tenantName"}),
                            id: res.data.data,
                            activeName: this.obj.type,
                        }
                    });
                }
                done(form);
            }).catch((err) => {
                console.error(err);
                done(form);
            })
        },
    }
}
</script>
